<template>
  <div class="accountAllField">
    <div :title="scope.row.resourceName" class="resource-name ellipsisOne">
      <span :class="scope.row.status ? 'link' : 'invalid-class'" @click="toDetail(scope)">{{ scope.row.resourceName }}</span>
      <span v-if="showNew(scope.row)" class="tag-item is-new">新号</span>
      <span v-if="showInSign(scope.row)" class="tag-item">在约中</span>
    </div>
    <div class="row-item">
      <div class="row-item-label">ID：</div>
      <div class="row-item-text">
        <LinkElement
          v-if="scope.row.resourceLink"
          :link-name="scope.row.resourceId"
          :link="scope.row.resourceLink"
          hide-copy />
        <ToolTip v-else :content="scope.row.resourceId"/>
      </div>
    </div>
    <div class="row-item">
      <div class="address-label platform">
        <platformIcon :data="scope.row.platformTypeName" />
        <ToolTip :content="scope.row.platformTypeName"/>
      </div>
      <div class="address-label address">
        <i class="el-icon-location-outline icon"/>
        <ToolTip :content="scope.row.baseInfo.address"/>
      </div>
    </div>
    <div v-if="tagList.length" class="tags-list">
      <TagSelect v-model="tagList" mode="list" />
      <el-popover
        v-if="residueTag.length"
        placement="right"
        width="240"
        trigger="click">
        <div class="tags-dialog-list">
          <div v-for="(tag) in scope.row.baseInfo.tag" :key="tag.id" class="tag-item ellipsisOne">{{ tag.name }}</div>
        </div>
        <div slot="reference" class="tag-item pointer">+{{ residueTag.length }}</div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title';
import TagSelect from '@/components/Common/tagSelect';
import platformIcon from '@/components/Common/platformIcon';
import LinkElement from '@/views/legal/process/components/formMake/components/linkElement';
// img
export default {
  components: { platformIcon, LinkElement, Title, TagSelect },
  props: {
    scope: {
      type: Object,
      default: () => { return {}; }
    },
    tableListSetting: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
    };
  },
  computed: {
    tagLength() {
      const tags = this.scope.row.baseInfo.tag || [];
      return tags.length;
    },
    tagList() {
      const tags = this.scope.row.baseInfo.tag || [];
      const length = this.tagLength;
      if (length <= 3) return tags;
      return tags.slice(0, 2);
    },
    residueTag() {
      if (this.tagLength <= 3) return [];
      const tags = this.scope.row.baseInfo.tag || [];

      return tags.slice(2);
    }
  },
  methods: {
    isShow(fieldName) {
      const accountConfig = this.tableListSetting.find(i => i.name === '账号信息');
      const item = accountConfig && accountConfig.children.find(j => j.fieldName === fieldName);
      return item && item.isShow;
    },
    showNew(row) {
      return row.additionalKey.isNewAccount && this.isShow('isNewAccount');
    },
    showInSign(row) {
      return row.additionalKey.journalStatus === 1 && this.isShow('inSign');
    },
    toDetail(scope) {
      this.$router.push({
        name: 'detailResource',
        params: {
          resourceId: scope.row.mediumId
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
.resource-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  .link {
    color: #406eff;
    cursor: pointer;
  }
  .invalid-class {
    color: #999;
    cursor: pointer;
  }
}

.tags-list {
  display: flex;
  align-items: center;
  margin-top: 4px;
}
.tags-dialog-list {
  display: flex;
  flex-wrap: wrap;
  @include scrollBar($x: hidden, $y: auto, $width: 3px);
  max-height: 200px;
  .tag-item {
    margin-bottom: 5px;
  }
}
.tag-item {
  margin-right: 8px;
  padding: 0 8px;
  height: 20px;
  line-height: 20px;
  background: #eff4ff;
  border-radius: 10px;
  font-size: 12px;
  color: #406eff;
  &.is-new {
    background: #fFC110;
    color: #fff;
    margin-left: 5px;
  }
}

.address-label {
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-right: 17px;
  &.address {
    max-width: 60%;
  }
  &.platform {
    max-width: 40%;
  }
  &:last-child {
    margin-right: 0;
  }
  .icon {
    font-size: 16px;
    color: #AEB6C7;
  }
  &::v-deep {
    .platform-icon {
      margin-left: 0 !important;
    }
  }
}
</style>
